<template>
  <div class="z-pagination">
    <button
      type="button"
      class="btn-prev number"
      @click="currentPageChange(-1)"
      :disabled="myCurrentPage == 1"
    >
      <i class="el-icon el-icon-arrow-left"></i>
    </button>
    <ul class="z-pager">
      <li
        class="number"
        :class="{ active: myCurrentPage == 1 }"
        @click="pageNumberChange(1)"
      >
        1
      </li>
      <!-- 前面的点点点 -->
      <li
        class="el-icon more btn-quicknext el-icon-more number"
        v-show="startEnd.start > 2"
      ></li>

      <!-- 中间要渲染的部分 -->
      <li
        :class="{ active: s + startEnd.start - 1 === myCurrentPage }"
        class="number"
        v-for="(s, index) in startEnd.end - startEnd.start + 1"
        :key="startEnd.start + index"
        @click="pageNumberChange(startEnd.start + index)"
      >
        {{ startEnd.start + index }}
      </li>

      <!-- 后面的点点点 -->
      <li
        class="el-icon more btn-quicknext el-icon-more number"
        v-show="startEnd.end < totalPages - 1"
      ></li>

      <li
        class="number"
        :class="{ active: myCurrentPage == totalPages }"
        @click="pageNumberChange(totalPages)"
        v-show="totalPages >= 2"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      type="button"
      class="btn-next number"
      @click="currentPageChange(1)"
      :disabled="myCurrentPage >= totalPages"
    >
      <i class="el-icon el-icon-arrow-right"></i>
    </button>
    <div class="allTotal">总共 {{ total }} 条</div>
  </div>
</template>

<script>
export default {
  name: 'zPagination',
  data() {
    return {
      myCurrentPage: this.currentPage,
    }
  },

  props: {
    total: { type: Number, default: 37 },
    pageSize: { type: Number, default: 5 },
    currentPage: { type: Number, default: 1 },
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    startEnd() {
      const { myCurrentPage, totalPages } = this
      let start = myCurrentPage - 2
      if (start < 2) start = 2
      let end = start + 4
      if (end > totalPages - 1) {
        end = totalPages - 1
        start = end - 4
      }
      if (totalPages < 7) {
        start = 2
        end = totalPages - 1
      }
      if (totalPages < 2) {
        start = 2
        end = 1
      }
      return {
        start,
        end,
      }
    },
  },
  methods: {
    pageNumberChange(page) {
      this.myCurrentPage = page
      this.$emit('current-change', page)
    },
    currentPageChange(number) {
      this.myCurrentPage += number
      if (number > 0) {
        this.$emit('next-click', this.myCurrentPage)
      } else {
        this.$emit('prev-click', this.myCurrentPage)
      }
    },
  },
  watch: {
    currentPage(newVal) {
      this.myCurrentPage = newVal
    },
  },
}
</script>

<style>
button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.z-pagination,
.z-pager {
  display: flex;
}
.z-pagination {
  justify-content: center;
  margin: 20px 0;
}
.number {
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  background-color: #f3f3f3;
  margin: 0 5px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.active {
  background-color: #e12b13;
  color: #fff;
}
.allTotal {
  line-height: 28px;
  margin-left: 10px;
  font-weight: 700;
  color: #666;
}
</style>
